<template>
    <div>
        <span style="font-size: 25px">账号资料</span>
        <hr style="border: 0; height: 1px; background: rgba(0, 0, 0, 0.1); margin: 50px 0;">

        <!--        左侧头像-->
        <div style="float: left;">
            <div style=" margin-left: 10px;">
                <el-avatar :src="BASE_URL+user.avatarUrl" :fit="contain" :size="240"/>
            </div>
            <el-button  style="width: 180px;margin: 20px 40px" @click="dialog">更换头像</el-button>
            <el-dialog
                style="width: 500px;padding: 40px;"
                v-model="dialogVisible"
            >
                <h1>请选择你要更换的头像</h1>
                <el-upload
                        v-model:file-list="fileList"
                        v-model:action="actionUrl"
                        name="file"
                        limit="1"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                >
                    <el-icon>
                        <Plus/>
                    </el-icon>
                </el-upload>
                <el-button type="primary" style="width: 100px;margin: 20px;"
                           @click="updateload">确定</el-button>
            </el-dialog>
        </div>
        <!--        右侧表单-->
        <div style="float: left;width: 500px;height: 200px ;margin-left:30px;">
            <el-form label-width="80px" class="el-form">
                <el-form-item label="用户名" class="el-form-item">
                    <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" class="el-form-item">
                    <el-input v-model="user.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" class="el-form-item">
                    <el-input v-model="user.email"></el-input>
                </el-form-item>


            </el-form>
        </div>
        <!-- 清除浮动 -->
        <div style="clear: both;"></div>
        <hr style="border: 0; height: 1px; background: rgba(0, 0, 0, 0.1); margin: 20px 0;">
        <!-- 保存按钮 -->
        <div style="display: grid; place-items: center; ">
            <el-button type="success" style="width: 150px;" @click="saveUserForm">保存</el-button>
        </div>
    </div>
</template>
<script setup>
    import axios from "axios";
    import qs from "qs";
    import { onMounted, ref } from 'vue';
    import { ElMessage } from 'element-plus';

    const user=ref({})
    onMounted(() => {
        user.value = getUser();
    })

    // 头像更换
    const dialogVisible=ref(false)
    const dialog= ()=>{
        dialogVisible.value=true
    }
    const fileList = ref([]);
    const dialogImageUrl = ref('');
    //定义变量用来保存图片提交的后端接口地址
    const actionUrl = ref(BASE_URL+'/v1/file/upload');
    const handleRemove = (uploadFile, uploadFiles) => {
        console.log(uploadFile, uploadFiles)
    }

    const handlePictureCardPreview = (uploadFile) => {
        dialogImageUrl.value = uploadFile.url
        dialogVisible.value = true
    }


    const userInfo = ref({
        id:'',
        username: '',
        password: '',
        phoneNumber: '',
        email: '',
        level: '',
        avatarUrl: ''
    });
    const updateload= ()=>{
        dialogVisible.value=false;
        userInfo.value.id =user.value.id;
        userInfo.value.avatarUrl = fileList.value[0].response.data;
        let data= qs.stringify(userInfo.value)
        console.log(user.value)
        axios.post(BASE_URL+'/v1/user/update',data).then((res)=>{
            if(res.data.code===2000){
                ElMessage.success('更新成功')
                userInfo.value.email = user.value.email
                userInfo.value.phoneNumber = user.value.phoneNumber
                userInfo.value.username = user.value.username
                userInfo.value.password = user.value.password
                userInfo.value.level = user.value.level
                // console.log(user.value)
                // console.log(userInfo.value)
                localStorage.setItem('user',JSON.stringify(userInfo.value))
                location.reload()
            }else{
                ElMessage.error(res.data.msg)
            }
        })
    }


    //更新用户信息
    const saveUserForm=()=>{
        // console.log(user.value)
       let data=qs.stringify(user.value)

        axios.post(BASE_URL+'/v1/user/update',data).then((res)=>{
            if(res.data.code == 2000){
                localStorage.setItem('user',JSON.stringify(user.value))
                if(ElMessage.success('更新信息成功')){
                    location.reload()
                }
            }else{
                ElMessage.error(res.data.msg)
            }
        })
    }
</script>

<style scoped>
.el-form-item{
    padding-top: 20px;
}
</style>